<template>
	<view class="content">
		<view class="address-list">
			<view class="address-list-li" v-for="(item,index) in items" :key="index" >
				<view class="address-list-inner po">
					<view class="flex">
						<text class="address-list-mobile">
							{{item.realname}}
						</text>
						<text>
							{{item.mobile}}
						</text>
					</view>
					<view class="colorc ptm5">
						{{item.address_name}}{{item.address_details}}
					</view>
				</view>
				<view class="address-list-btn colorc flex">
					<view @click="checkboxChange(item)" class="address-icon " :class="[item.is_default == 1 ? 'active' : '']">
						默认地址
					</view>
					<view class="flex colorc address-list-btn-list">
						<view class="" @click="edit(item)">
							<image class="address-list-btn-icon" src="/static/address_edit.png" mode=""></image>
							<text>编辑 </text>
						</view>
						<view class="" @click="del(item)">
							<image class="address-list-btn-icon" src="/static/address_del.png" mode=""></image>
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>					
		</view>
		<view class="foot" @click="addAddress">
			添加新地址
		</view>
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-ui/uni-icon/uni-icon.vue'
	
	import {
        mapState,
        mapMutations
    } from 'vuex'
	export default {
		computed: {
            ...mapState(['token'])
        },
		components: {
			uniIcon
		},
		data() {
			return {
				items: []
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getList()
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest']),
			checkboxChange: function (item) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '设置该地址为默认地址？',
					success: function (res) {
						if (res.confirm) {
							_this.getEdit(item)
						} 
					}
				});
			},
			getEdit(item) {
				let _this = this
				this.vuexRequest({
					url: '/api/v2/member/address/' + item.id +'?access-token=' + this.token,
					method: 'PUT',
					data: {is_default:1},
					success: (res)  => {
						_this.getList()
					},
					fail: (err)  => {
					},
				})
			},
			getList() {
				let _this = this
				this.vuexRequest({
					url: '/api/v2/member/address?access-token=' + this.token,
					method: 'GET',
					data: {},
					success: (res)  => {
						_this.items = res.data.data
					},
					fail: (err)  => {
					},
				})
			},
			getDel(item) {
				let _this = this
				this.vuexRequest({
					url: '/api/v2/member/address/'+item.id+'?access-token=' + this.token,
					method: 'DELETE',
					data: {},
					success: (res)  => {
						uni.showToast({
							title: res.data.message,
							position:'bottom'
						})	
						_this.getList()
					},
					fail: (err)  => {
						uni.showToast({
							title: err.data.message,
							position:'bottom'
						})						
					},
				})
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/mine/address/address'
				});
			},
			edit(item) {	// 编辑
				uni.navigateTo({
					url: '/pages/mine/address/address?detailDate=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			del(item) {	 	// 删除
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确认删除该地址？',
					success: function (res) {
						if (res.confirm) {
							_this.getDel(item)
						} 
					}
				});
			}
		}
	}
</script>

<style>
	.colorc{
		color: #686868;
	}
	.ptm5{
		padding: 10upx 0;
	}
	.flex{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.po{
		position: relative;
	}
	.po:after{
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.foot{
		position: fixed;
		bottom: 0;
		color: #FFFFFF;
		width: 100%;
		height: 100upx;
		background: #f54336;
		text-align: center;
		line-height: 100upx;
		z-index: 20;
	}
	.content{
		padding: 0 0 120upx 0;
	}
	.address-list-li{
		background: #FFFFFF;
		margin: 0 0 20upx 0;
	}
	.address-list-inner{
		padding: 20upx 30upx;
	}
	.address-list-btn{
		padding: 20upx 30upx;
		font-size: 26upx;
	}
	.address-list-btn-icon{
		width: 30upx;
		height: 30upx;
		vertical-align: sub;
		margin: 10upx 10upx 0 0;
	}
	.address-list-btn-list view{
		width: 120upx;
		text-align: right;
		font-size: 26upx;
	}
	.address-icon{
		position: relative;
		padding: 0 0 0 40upx;
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		display: inline-block;
		text-decoration: none;
		-webkit-font-smoothing: antialiased;
	}
	.address-icon.active:before{
		background: #f54336;
		border: solid 1px #f54336;
		color: #fff;
		line-height: 30upx;
		font-size: 28upx ;
	}
	.address-icon:before{
		color: #FFFFFF;
		display: block;
		position: absolute;
		content: '\E472';
		width: 30upx;
		height: 30upx;
		border: solid 1px #CCCCCC;
		top: 50%;
		left: 0;
		border-radius: 50%;
		margin: -18upx 0 0 0;
	}
</style>
